<template>
    <div>
        <el-container>
            <el-header>系统信息</el-header>
            <el-main>
                <div style="display: flex">
                    <div style="width: 100px; font-weight: bold; text-align: right;">操作系统：</div>
                    <div style="width: calc(100% - 100px);">
                        {{ server_info.os ? server_info.os : '' }}
                    </div>
                </div>
                <div style="display: flex; padding-top: 20px">
                    <div style="width: 100px; font-weight: bold; text-align: right;">运行环境：</div>
                    <div>
                        {{ server_info.server ? server_info.server : '' }}
                    </div>
                </div>
                <div style="display: flex; padding-top: 20px">
                    <div style="width: 100px; font-weight: bold; text-align: right;">PHP：</div>
                    <div>
                        {{ server_info.php ? server_info.php : '' }}
                    </div>
                </div>
                <div style="display: flex; padding-top: 20px">
                    <div style="width: 100px; font-weight: bold; text-align: right;">Lummen：</div>
                    <div>
                        {{ server_info.lummen ? server_info.lummen : '' }}
                    </div>
                </div>
                <div style="display: flex; padding-top: 20px">
                    <div style="width: 100px; font-weight: bold; text-align: right;">CPU：</div>
                    <div style="width: calc(100% - 100px);">
                        <div>{{ os_info.ncpu ? os_info.ncpu : '' }}核</div>
                        <el-slider v-model="os_info.cpu_usage" disabled></el-slider>
                    </div>
                </div>
                <div style="display: flex; padding-top: 20px">
                    <div style="width: 100px; font-weight: bold; text-align: right;">内存：</div>
                    <div style="width: calc(100% - 100px);">
                        <div>{{ os_info.memory_total ? os_info.memory_total : '' }}</div>
                        <el-slider v-model="os_info.memory_usage" disabled></el-slider>
                    </div>
                </div>
                <div style="display: flex; padding-top: 20px">
                    <div style="width: 100px; font-weight: bold; text-align: right;">存储：</div>
                    <div style="width: calc(100% - 100px);">
                        <div>{{ os_info.disk_total ? os_info.disk_total : '' }}</div>
                        <el-slider v-model="os_info.disk_usage" disabled></el-slider>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import store from '@/store/index'
import { get as getOsInfo } from '@/platform/api/os'

export default {
    data() {
        return {
            server_info: store.state.platform.platform_info.server,
            os_info: {}
        }
    },
    created() {
        getOsInfo().then(res => {
            this.os_info = res.data
        })
    }
}
</script>

<style scoped lang="scss">
.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    height: 450px;
}
</style>